<template>
	<view>
		<!-- background-color: rgba(255, 255, 255, 0.6);  box-shadow: 5.0px 9.9px 9.9px hsl(0deg 0% 0% / 0.35); -->
		<view class="gui-grid  gui-dark-bg-level-3" style="background-color: rgba(255, 255, 255, 0.4); 
		box-shadow: 5.0px 9.9px 9.9px hsl(0deg 0% 0% / 0.35); width: 90%; height: 150rpx; margin: 0 auto; 
		text-align: center; border-radius: 25rpx; margin-top: 80rpx;">
			<view @click="nav_to(item.url,item.title)" v-for="(item, idx) in data" :key="idx">
				<image style="margin-top: 15rpx;" mode="aspectFill" class="gui-grid-icon-img"
					:src="'/static/icon/'+item.icon">
				</image>
				<br>
				<text class="gui-grid-text gui-primary-text">{{item.title}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "notice",
		props: {
			width: {
				type: Number,
				default: 0
			},
			text: {
				type: String,
				default: ''
			},
			size: {
				type: Number,
				default: 26
			},
			lineHeight: {
				type: Number,
				default: 1.8
			},
			padding: {
				type: Number,
				default: 15
			},
			margin: {
				type: Number,
				default: 15
			},
			customClass: {
				type: Array,
				default: function() {
					return ['gui-bg-primary', 'gui-color-white'];
				}
			},
			borderRadius: {
				type: Number,
				default: 6
			},
			data: {
				type: Array,
				default: function() {
					return [];
				}
			},
			borderColor: {
				type: String,
				default: 'rgba(255,255,255,0)'
			},
			backColor: {
				type: String,
				default: 'rgba(255,255,255,0)'
			}
		},
		data() {
			return {
				tapping: false,
				// imageList:list
			}
		},
		created() {
			console.log("creatd", this.d);
		},

		methods: {
			tapme: function() {
				this.$emit('tapme', this.data);
			},
			nav_to(d, title = null) {
				if (title === "消息") {
					this.$comm.nav_to("#/pages/home/message/message", title);
				} else {
					this.$comm.nav_to(d, title);
				}
			},
		},
		emits: ['tapme']
	}
</script>
<style scoped>
	.gui-tags {
		text-align: center;
	}

	.gui-tag-opacity {
		opacity: 0.88;
	}

	.gui-grid {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: space-around;
	}
</style>